﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>KnockoutJs</title>
    <script src="js/jq/jquery.lastest.js"></script>
    <script src="js/ko/knockout.lastest.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        body
        {
            font-family: Tahoma;
            font-size: 12px;
        }

        a, a:visited
        {
            text-decoration: none;
            color: #007ad3;
        }

            a:hover
            {
                color: #dd1515;
            }

        h2:first-child
        {
            padding-top: 0px;
        }

        h1, h2
        {
            padding: 5px 0;
            margin: 5px 0;
            color: #ff6a00;
        }

        h3
        {
            padding: 0px 0px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h2>Knockout Library Tutor</h2>
    <h3>1. Tutor</h3>
    <ul>
        <li><a href="mods/tutor/01.introduction.html">Introduction</a></li>
        <li><a href="mods/tutor/02.list_collection.html">List & Collection</a></li>
        <li><a href="mods/tutor/03.single_page.html">Single Page</a></li>
        <li><a href="mods/tutor/04.custom_binding.html">Custom Bindings</a></li>
        <li><a href="mods/tutor/05.load_save.html">Load & Save Data</a></li>
    </ul>

    <h3>2. Example</h3>
    <ul>
        <li><a href="mods/example/cart.editor">Cart Editor (Shoping cart)</a></li>
    </ul>

    <h3>3. Real world applcation</h3>
    <ul>
        <li><a href="../rd.ko.co" target="_blank">Component One InvExplorer</a></li>
        <li><a href="mods/real.world.app/portfolio">Portfolio (default CSS)</a></li>
        <li><a href="mods/real.world.app/portfolio/index.model.pure.html">Portfolio (with Pure CSS)</a></li>
        <li><a href="mods/real.world.app/portfolio/index.model.bootstrap.html">Portfolio (with Bootstrap CSS)</a></li>
        <li><a href="mods/real.world.app/portfolio/index.model.yaml.html">Portfolio (with YAML CSS - OK)</a></li>
        <li><a href="mods/real.world.app/portfolio/index.model.yaml.class.html">Portfolio (YAML + class)</a></li>
        <li><a href="mods/real.world.app/portfolio/index.model.yaml.class.base.html">Portfolio (YAML + class + base class)</a></li>
    </ul>

    <h2>Design Pattern in Javascript</h2>
    <h3>1. Namespacing in JavaScript</h3>
    <ul>
        <li><a href="mods/namespace/00.demo.html" target="_blank">My Demo</a></li>
        <li><a href="mods/namespace/01.by.direct.assignment.html" target="_blank">By Direct Assignment</a></li>
        <li><a href="mods/namespace/02.using.object.literal.notation.html" target="_blank">Using Object Literal Notation</a></li>
        <li><a href="mods/namespace/03.the.module.pattern.html" target="_blank">The Module Pattern</a></li>
        <li><a href="mods/namespace/04.supply.a.namespace.argument.html" target="_blank">Supply a Namespace Argument</a></li>
        <li><a href="mods/namespace/05.use.this.as.a.namespace.proxy.html" target="_blank">Use this as a Namespace Proxy</a></li>
    </ul>

    <h2>jq Widgets</h2>
    <h3>1. Entry Form</h3>
    <ul>
        <li><a href="mods/demo/jqxEntry.htm" target="_blank">jqWidget Entry Form</a></li>
    </ul>
</body>
</html>
